import React, { useState, useRef, useCallback } from 'react';
import { View, Text, Button, StyleSheet, ScrollView } from 'react-native';
import { ExpandableCalendar, CalendarProvider, Agenda } from 'react-native-calendars';
import { Tester, TestCase, TestSuite } from '@rnoh/testerino';
import testIDs from '../testIDs';
import { agendaItems, getMarkedDates } from '../mocks/agendaItems';
import { getTheme, themeColor } from '../mocks/theme';

const INITIAL_DATE = '2022-07-07';

const leftArrowIcon = require('../img/previous.png');
const rightArrowIcon = require('../img/next.png');

export function ExpandableCalendarExample3() {
    const theme = useRef(getTheme());
    const [daySelected, setDaySelected] = useState('');
    const [selectedDate, setSelectedDate] = useState(INITIAL_DATE);
    const marked = useRef(getMarkedDates());

    const onDayPress = useCallback((day) => {
        setSelectedDate(day.dateString);
    }, [selectedDate]);

    return <ScrollView style={styles.container}>
        <View style={styles.testVertical}>
            <Text style={styles.testSuiteHeader}>rightArrowImageSource</Text>
            <View style={styles.viewContainer}>
                <Text style={styles.textDetails}>test ExpandableCalendar rightArrowImageSource property</Text>
                <Text style={styles.testCaseStatus}>Example</Text>
            </View>
            <CalendarProvider date={'2012-5-8'}>
                <ExpandableCalendar
                    rightArrowImageSource={rightArrowIcon}
                />
            </CalendarProvider>
        </View>

        <View style={styles.testVertical}>
            <Text style={styles.testSuiteHeader}>allowShadow</Text>
            <View style={styles.viewContainer}>
                <Text style={styles.textDetails}>test ExpandableCalendar allowShadow property with the vlaue true</Text>
                <Text style={styles.testCaseStatus}>Example</Text>
            </View>
            <CalendarProvider date={INITIAL_DATE}>
                <ExpandableCalendar
                    pastScrollRange={3}
                    futureScrollRange={3}
                    allowShadow={true}
                    onDayPress={onDayPress}
                    markedDates={{
                        [daySelected]: { selected: true, disableTouchEvent: true },
                    }}
                    style={styles.calendar}
                />
            </CalendarProvider>
        </View>
        <View style={styles.testVertical}>
            <Text style={styles.testSuiteHeader}>allowShadow</Text>
            <View style={styles.viewContainer}>
                <Text style={styles.textDetails}>test ExpandableCalendar allowShadow property with the vlaue false"</Text>
                <Text style={styles.testCaseStatus}>Example</Text>
            </View>
            <CalendarProvider date={INITIAL_DATE}>
                <ExpandableCalendar
                    pastScrollRange={3}
                    futureScrollRange={3}
                    allowShadow={false}
                    onDayPress={onDayPress}
                    markedDates={{
                        [daySelected]: { selected: true, disableTouchEvent: true },
                    }}
                    style={styles.calendar}
                />
            </CalendarProvider>
        </View>



    </ScrollView >
}


const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
    },
    item: {
        width: '100%',
        marginBottom: 20,
        borderColor: 'blue',
        borderWidth: 1,
    },
    itemText: {
        color: 'white',
        fontSize: 12,
    },
    calendar: {
        paddingLeft: 20,
        paddingRight: 20
    },
    testSuiteHeader: {
        width: '100%',
        fontWeight: 'bold',
        color: '#EEE'
    },
    testCaseStatus: {
        width: 72,
        height: '100%',
        fontSize: 12,
        fontWeight: 'bold',
        textAlign: 'right',
        color: '#AAA',
    },
    textDetails: {
        width: '70%',
        padding: 2,
        fontSize: 10,
        color: 'white',
        marginBottom: 16,
        backgroundColor: 'rgba(0,0,0,0.1)'
    },
    testVertical: {
        marginVertical: 20,
    },
    viewContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
})

